<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="list"
      tooltip-effect="dark"
      style="width: 100%"
      :height="tableHeight"
      @select="handleSelect"
      @select-all="handleSelectAll"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="序号">
        <template slot-scope="scope">
          <div>
            {{ (scope.$index + 1)+ (currentPage - 1)*pageSize }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="名称" width="250">
        <template slot-scope="scope">
          <div class="name-wrapper d-flex">
            <el-avatar style="overflow: hidden !important" :size="50" :src="scope.row.img_show" shape="square" />
            <div class="name-desc">
              <p>{{ scope.row.name }}</p>
              <p>货号：{{ scope.row.item_no }}</p>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="分类" width="150">
        <template slot-scope="scope">
          <div>
            {{ scope.row.first_cate_name }}-{{ scope.row.second_cate_name }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="价格" width="200">
        <template slot-scope="scope">
          <div>
            <p class="d-flex">
              <span class="no-wrap">原价：￥</span>
              <span>{{ scope.row.original_price }}</span>
            </p>
            <p class="d-flex">
              <span class="no-wrap">市价：￥</span>
              <span>{{ scope.row.price }}</span>
            </p>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="inventory" label="库存" />
      <el-table-column prop="sold_out" label="销量" />
      <el-table-column label="一级佣金比例(%)" width="150">
        <template slot-scope="scope">
          <div v-if="!isVip">
            <el-input v-model="scope.row.commonGoodsFirstCommission" size="mini" @blur="handleBlur(scope)" />
          </div>
          <div v-else>
            <el-input v-model="scope.row.vipGoodsFirstCommission" size="mini" @blur="handleBlur(scope)" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="二级佣金比例(%)" width="150">
        <template slot-scope="scope">
          <div v-if="!isVip">
            <el-input v-model="scope.row.commonGoodsSecondCommission" size="mini" @blur="handleBlur(scope)" />
          </div>
          <div v-else>
            <el-input v-model="scope.row.vipGoodsSecondCommission" size="mini" @blur="handleBlur(scope)" />
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    list: {
      type: Array,
      default: () => []
    },
    pageSize: {
      type: Number,
      default: 0
    },
    currentPage: {
      type: Number,
      default: 1
    },
    isVip: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      multipleSelection: [],
      tableHeight: 0
    }
  },
  created() {
    this.changeSize()
  },
  methods: {
    handleBlur(scope) {
      this.$emit('myBlur', scope)
    },
    handleSelect(val) {
      this.multipleSelection = val
      // console.log(val)
      this.$emit('select', val)
    },
    handleSelectAll(val) {
      console.log(val)
      this.$emit('selectAll', val)
    },
    changeSize() {
      this.tableHeight = document.body.clientHeight - 270
      window.onresize = () => {
        this.tableHeight = document.body.clientHeight - 270
      }
    },
    _success(res) {
      this.$message({
        showClose: true,
        message: res.message,
        type: 'success'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";

.el-input {
  display: inline-block;
}

.el-avatar {
  margin-right: 10px;
  overflow: inherit !important;
}

.cursor-p {
  cursor: pointer;
}
.d-flex {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.no-wrap {
  white-space: nowrap;
}
.w-60 {
  width: 40px;
}
.name-desc{
  text-align: left;
  box-sizing: border-box;
  p{
    margin: 0;
    width: 150px;
    @include ellipsis()
  }
}
</style>
